<template>
	<view style="position: fixed;top: 0;left: 0;z-index: 66;" v-if="alertLottery && selfAlertLottery">
		<view @click="closeBtn" class="close">
			<uni-icons type="close" size="30" color="#fff"></uni-icons>
		</view>
		<view class="wheel" @click="go">
			<image class="wheel_bg" src="../../static/almost-lottery/w_bg.png" mode=""></image>
			<image class="wheel_2" src="../../static/almost-lottery/w_2.png" mode=""></image>
			<image class="wheel_3" src="../../static/almost-lottery/w_3.png" mode=""></image>
		</view>
		<view class="btn">立即抽红包</view>
	</view>
</template>

<script>
	import Login from '@/utils/login.js';
	export default {
		props: {
			alertLottery: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selfAlertLottery: true,

			};
		},
		created() {
			var that = this;

		},
		methods: {
			click() {

			},
			async go() {
				await Login.isLogin();
				this.selfAlertLottery = false;
				uni.navigateTo({
					url: '../../pages/lottery_wheel/lottery_wheel'
				});
			},
			closeBtn() {
				this.selfAlertLottery = false;
			}
		}
	};
</script>

<style lang="scss">
	.wheel_bg {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: 1049rpx;
		width: 750rpx;
	}

	.close {
		    position: fixed;
		    z-index: 9999999999;
		    top: 266rpx;
		    right: 81rpx;
		    margin: auto;
		    width: 111rpx;
		    height: 111rpx;
		    display: flex;
		    justify-content: center;
		    align-items: center;
	}

	.wheel {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 500rpx;
		height: 507rpx;
		background: url() 0% 0% /100% 100% no-repeat;

		&_2 {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 125rpx;
			margin: auto;
			width: 320rpx;
			height: 320rpx;
			animation: turn 1s linear infinite;
		}

		&_3 {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 125rpx;
			margin: auto;
			width: 150rpx;
			height: 166rpx;
		}
	}

	.btn {
		position: fixed;
		top: 555rpx;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 360rpx;
		height: 65rpx;
		text-align: center;
		line-height: 65rpx;
		color: #bc1136;
		background: url() 0% 0% /100% 100% no-repeat;
		animation: mymove 5s infinite;
		-webkit-animation: mymove 5s infinite;
		/*Safari and Chrome*/
		animation-direction: alternate;
		/*轮流反向播放动画。*/
		animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
		/* Safari 和 Chrome */
		-webkit-animation: mymove 5s infinite;
		-webkit-animation-direction: alternate;
		/*轮流反向播放动画。*/
		-webkit-animation-timing-function: ease-in-out;
		/*动画的速度曲线*/
	}

	// 旋转动画
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	// 按钮动画
	@keyframes mymove {
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}

	}

	@-webkit-keyframes mymove

	/*Safari and Chrome*/
		{
		0% {
			transform: scale(1);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.1);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
		}

		75% {
			transform: scale(1.1);
		}
	}
</style>
